<!DOCTYPE html>
{% load static %}
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>日志查看系统</title>
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/adminlte/js/adminlte.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/adminlte/css/adminlte.min.css'%}">

    <!-- Font Awesome -->
    <link href="{% static 'plugins/fontawesome-free/css/all.min.css'%}" rel="stylesheet">

    <script type="text/javascript">
        var ids = {{ ids| safe}};
        // 向显示区域插入接收的信息
        const insertMessage = function (msg, type = 'success') {
            $('#messagecontainer').append('<p class="text-' + type + '">' + msg + '</p>');
            // 将滚动条移动到末尾
            var scrollHeight = $('#messagecontainer').prop('scrollHeight')
            $('#messagecontainer').scrollTop(scrollHeight, 200)

        }
        const begin = function () {
            if (window.s) {
                window.s.close()
            }
            var socket = new WebSocket("wss://" + window.location.host + "/realtimelog/");
            console.log(socket);
            socket.onopen = function () {
                insertMessage('已启动上传服务，准备上传...')
                let msg = {
                    code: 100,
                    msg: ids
                }
                socket.send(JSON.stringify(msg));
            };
            socket.onmessage = function (e) {
                receiveData = JSON.parse(e.data);
                code = receiveData['code'];
                msg = receiveData['msg'];
                if (code == '999') {
                    // 关闭连接
                    if (window.s) {
                        window.s.close();
                    }
                    insertMessage(msg, 'danger')
                } else {
                    insertMessage(msg)
                }

            };
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
            window.s = socket;
        };
        $(function () {

            begin();

            $('#close_websocket').click(function () {
                if (window.s) {
                    window.s.close();
                    console.log('WebSocket已关闭！');
                }
                history.go(-1);
            });



        });
    </script>
</head>

<body class="content-wrapper" data-widget="iframe">
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            <div style="width:100px;">
                <button id="close_websocket" type="button" class="btn btn-block btn-outline-secondary"><i
                        class="fa fa-angle-left"></i>返回</button>
            </div>
            <p></p>
            <!-- <div style="background-color: bisque" id="messagecontainer"></div> -->
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fa fa-file-text"></i>
                        小程序上传日志
                    </h3>
                </div>
                <!-- /.card-header -->
                <div id="messagecontainer" class="card-body"
                    style="height:400px;overflow-y:auto;background-color: black;">
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
            <hr />
        </div>
    </section>
</body>

</html>